body{width: 885px;  margin: 0 auto; overflow: hidden;}
.win{display: block;position: relative;width: 885px;height:182px;margin: 0 auto;background: #f5f5f5;}
.win .bs1{position: absolute;left: 166px;top:45px;}
.win .bs2{position: absolute;left: 400px;top:45px;}
.win .bs3{position: absolute;left: 630px;top:45px;}
.ten{position: absolute;z-index: 999;left:65px;top:48px;}
.ren{position: absolute;z-index: 999;left:293px;top:48px;}
.customer{position: absolute;z-index: 999;left:518px;top:48px;}
.designer{position: absolute;z-index: 999;left:760px;top:48px;}
.win .spinning-wing0{background:url(sss1.png) no-repeat 0px 0;width: 182px;height: 182px;margin: 0;top: 0px;left: 0px;position: absolute;}
.win .spinning-wing1{background:url(sss2.png) no-repeat 0px 0;width: 182px;height: 182px;margin: 0;top: 0px;left: 240px;position: absolute;}
.win .spinning-wing2{background:url(sss3.png) no-repeat 0px 0;width: 182px;height: 182px;margin: 0;top: 0px;left: 465px;position: absolute;}
.win .spinning-wing3{background:url(sss4.png) no-repeat 0px 0;width: 182px;height: 182px;margin: 0;top: 0px;left: 699px;position: absolute;}
.win .spinning-wing0{z-index: 88;-webkit-transition-property: -webkit-transform;-webkit-transition-duration: 1s;-moz-transition-property: -moz-transform;-moz-transition-duration: 1s;-webkit-animation: rotate 4s linear infinite;-moz-animation: rotate 4s linear infinite;-o-animation: rotate 4s linear infinite;animation: rotate 4s linear infinite;}
.win .spinning-wing1{z-index: 88;-webkit-transition-property: -webkit-transform;-webkit-transition-duration: 1s;-moz-transition-property: -moz-transform;-moz-transition-duration: 1s;-webkit-animation: rotate2 4s linear infinite;-moz-animation: rotate2 4s linear infinite;-o-animation: rotate2 4s linear infinite;animation: rotate2 4s linear infinite;}
.win .spinning-wing2{z-index: 88;-webkit-transition-property: -webkit-transform;-webkit-transition-duration: 1s;-moz-transition-property: -moz-transform;-moz-transition-duration: 1s;-webkit-animation: rotate 4s linear infinite;-moz-animation: rotate 4s linear infinite;-o-animation: rotate 4s linear infinite;animation: rotate 4s linear infinite;}
.win .spinning-wing3{z-index: 88;-webkit-transition-property: -webkit-transform;-webkit-transition-duration: 1s;-moz-transition-property: -moz-transform;-moz-transition-duration: 1s;-webkit-animation: rotate2 4s linear infinite;-moz-animation: rotate2 4s linear infinite;-o-animation: rotate2 4s linear infinite;animation: rotate2 4s linear infinite;}

.win2{ position: relative;}


@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
to{-o-transform: rotate(359deg)}
}
@keyframes rotate{from{transform: rotate(0deg)}
to{transform: rotate(359deg)}
}
@-webkit-keyframes rotate2{from{-webkit-transform: rotate(0deg)}
to{-webkit-transform: rotate(-360deg)}
}
@-moz-keyframes rotate2{from{-moz-transform: rotate(0deg)}
to{-moz-transform: rotate(-359deg)}
}
@-o-keyframes rotate2{from{-o-transform: rotate(0deg)}
to{-o-transform: rotate(-359deg)}
}
@keyframes rotate2{from{transform: rotate(0deg)}
to{transform: rotate(-359deg)}
}



@keyframes packAni {
    0%{transform: translateY(0);}
    10%{transform: translateY(-0.3rem) skew(-0.1rad,-0.1rad);}
    20%{transform: translateY(0);}
    30%{transform: translateY(-0.1rem) skew(0.1rad,0.1rad);}
    40%{transform: translateY(0);}
    50%{transform: translateY(-0.3rem) skew(-0.1rad,-0.1rad);}
    60%{transform: translateY(0);}
    100%{transform: translateY(0);}
}
@-webkit-keyframes packAni {
    0%{-webkit-transform: translateY(0);}
    10%{-webkit-transform: translateY(-0.3rem) skew(-0.1rad,-0.1rad);}
    20%{-webkit-transform: translateY(0);}
    30%{-webkit-transform: translateY(-0.1rem) skew(0.1rad,0.1rad);}
    40%{-webkit-transform: translateY(0);}
    50%{-webkit-transform: translateY(-0.3rem) skew(-0.1rad,-0.1rad);}
    60%{-webkit-transform: translateY(0);}
    100%{-webkit-transform: translateY(0);}
}
.block2{ width: 885px;   background: #340e0e;}
.welfare-pack {
    position: relative;
    text-indent: -9999em;
    overflow: hidden;
    display: block;
    background: url(welfarepack.png) no-repeat;
    background-size: 100% auto;
    width: 3.49rem;
    height: 4.35rem;
    margin: 0 auto;
}
.block2 .welfare-pack {
    animation: packAni 2.5s .5s ease infinite;
    -webkit-animation: packAni 2.5s .5s ease-out infinite;
}

.block{ background: #f5f5f5;}
.animation_box{width: 100%; overflow: hidden; text-align: center; display: flex; justify-content:space-between}
.animation_box img{ transform:scale(0.5,0.5);-webkit-transform:scale(0.5,0.5);}
.a1{animation: rollIn 2s infinite;}
.a2{animation: fadeInRightBig 2s infinite;}
.a3{animation: flipInY 2s infinite;}
.a4{animation: flip 2s infinite;}